<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>GIS</title>
		<link rel="stylesheet" href="../css/reset.css">
		<link rel="stylesheet" href="../css/gis.css">
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<!-- 引入babel-polyfill es6转es5 -->
		<script src="https://cdn.bootcss.com/babel-polyfill/7.8.3/polyfill.min.js"></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=e597d2b6b6267bfa2213986c04d5a40a"></script>
		<!--[if lt IE 9]>
	         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
	         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
	      <![endif]-->
	</head>
	<body>
		<!--container-->
		<div id="app">
			<div class="search-box">
				<input v-model="searchKey" type="search" id="search" />
				<button @click="searchByHand">搜索</button>
				<div class="tip-box" style="visibility: hidden;" id="searchTip"></div>
			</div>
			<div id="container"></div>
		</div>
	</body>
	
	<script src="../js/jquery1.7.js"></script>
	
	<script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
				searchKey: ''
            },
            computed:{
            },
            methods:{
				searchByHand(){},
				// 轮播图底部按钮事件
				swiperButtonEvent(data){
					var text = data.payload || data.text
					this.sendEventAjax(text)
				},
				quickButtonEvent(text){
					this.sendEventAjax(text)
				},
				sendEventAjax(text){
					var _this = this;
					if (_this.disableOff) { return; }

					_this.disableOff = true;
					var list = {
						"type": "text",
						"text": _this.inputVal || text
					};
					// 添加list数据
					if (_this.inputVal){
						_this.listData.push({
							type: 1,
							text: _this.inputVal,
						})
					}
				
					axios({
                       	method:'post',
						url : 'http://172.25.126.88:3001/api/v1/bots/china-unicom-theatre/converse/'+_this.userId,//请求的 URL地址
						data : list,
                    }).then(function(res){
                        // console.log(res);
						_this.inputVal = null;
						_this.disableOff = false;

						res.data.responses.forEach((element, index) => {
							if (element.type == "typing"){
								res.data.responses.splice(index,1)
							}
						});
						_this.responses = res.data.responses;

						//  重新定义第0个数据
						var resultDataOne = [];
						//  更新底部按钮展示
						var resultAll = res.data.responses;
						for(var i = 0; i<resultAll.length; i++){
							if (resultAll[i].wrapped && resultAll[i].wrapped.text == 'hide'){
								_this.showFooterBtn = false;
							} else {
								_this.showFooterBtn = true;
							}

							if(resultAll[i].type && resultAll[i].type == 'carousel'){
								resultAll[i].elements.forEach((ele) =>{
									ele.picture = ele.picture.replace('localhost', '172.25.126.88');
								})
								// 购票订票轮播
								_this.listData.push({
									type: 2,
									bannerList: resultAll[i].elements
								})
							} else if (resultAll[i].type && resultAll[i].type == 'file') {
								console.log(resultAll[i])
								resultAll[i].url = resultAll[i].url.replace('localhost', '172.25.126.88');
								_this.listData.push({
									type: 2,
									file: resultAll[i].url
								})
							} else {
								// 开场白
								if (resultAll[i].wrapped && resultAll[i].wrapped.text !== 'hide') {
									_this.quick_replies = resultAll[i].quick_replies;
								}
								_this.listData.push({
									type: 2,
									text: (resultAll[i].wrapped && resultAll[i].wrapped.text && resultAll[i].wrapped.text) || resultAll[i].text
								})

								_this.listData.forEach((items, index) =>{
									if (items.text === 'hide') {
										_this.listData.splice(index, 1)
									}

									if (String(items.text).indexOf('%%')>-1){
										var textArr = String(items.text).split('%%');
										items.text = textArr.join('</br>');
									}
								})
							}
						}
                    });
				}
            },
            beforeMount(){
                // console.log("挂载前生命周期");
            },
            mounted(){
				var map = new AMap.Map('container', {
					zoom:11,//级别
					center: [116.397428, 39.90923],//中心点坐标
					viewMode:'3D'//使用3D视图
				});
				//实时路况图层
				var trafficLayer = new AMap.TileLayer.Traffic({
					zIndex: 10
				});
				map.add(trafficLayer);//添加图层到地图
            },
            watch:{
                
            }
        })
    </script>
</html>
